<template>
  <!--新歌速递-->
  <div class="courier">
    <ul>
      <li @click="skipGrabble('playSong',infoSong.id)">
        <img :src="infoSong.album.blurPicUrl" width="100px" alt />
        <i class="ico"></i>
      </li>
      <li class="left">
        <h4>{{infoSong.name}}</h4>
        <p>{{infoSong.album.artists[0].name}}</p>
      </li>
      <li class="right">
        <p>{{infoSong.album.type}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "courier",
  props: ["infoSong"],
  methods: {
    skipGrabble(path, val) {
      const newUrl=this.$router.resolve({
        name: path,
        query: {
          keyWord: val
        }
      })
      
      window.open(newUrl.href,'_blank')
    }
  }
};
</script>

<style lang="less" scoped>
.courier {
  display: inline-block;
  width: 350px;
  cursor: pointer;
  position: relative;
  ul {
    display: flex;
    padding: 10px;
    margin: 0;
    border-bottom: 1px solid #dedede;
    li {
      -webkit-align-self: center;
      position: relative;
      h4,
      p {
        margin: 4px 0;
      }
      p {
        color: #999;
        font-family: "Courier New", Courier, monospace;
        font-size: 14px;
      }
      img:hover + i {
        display: block;
      }
      i.ico {
        width: 40px;
        height: 40px;
        position: absolute;
        background: url(~@/assets/img/play.png);
        background-size: contain;
        top: calc(50% - 20px);
        left: calc(50% - 20px);
        display: none;
      }
      i.ico:hover {
        display: block;
      }
    }
    li.left {
      margin-left: 15px;
    }
    li.right {
      position: absolute;
      left: 300px;
    }
  }
}
</style>